<template>
	<view>
		<view class="cityBar ">
			<view class="rows" :style="{height:System.statusBarHeight+'px'}"></view>
			<view class="d-flex a-center" :style="{width:navWidth+'px',height:navHeight+'px'}">
				<view class="iconfont icon-xiangzuo size36 black padding20" @click="$back()"></view>
				<text class="size32 black bold">选择城市</text>
			</view>
			<view class="viewbox auto d-flex a-center m-top20 m-bot20 search">
				<view class="iconfont icon-btn_search color_99 size36"></view>
				<input type="text" class="flex-1 height p-left10 size26 color_33" v-model="searchCity"
					placeholder="输入城市">
			</view>
		</view>

		<view class="rows" :style="{height:fiexHeight+'px'}"></view>
		<scroll-view scroll-y="true" class="scrollY" :scroll-top="scrolltop" @scroll="scroll"
			:scroll-into-view="scrollintoview" v-show="!searchCity">
			<view class="hotCity">
				<text class="size28 color_99">热门城市</text>
				<view class="row j-sb">
					<block v-for="(item,index) in cityList.hit" :key="index">
						<view class="hot flexac" @click="citySelect(item)">{{item.name}}</view>
					</block>
				</view>
			</view>

			<view class="allCity">
				<view class="row m-top20" :id="`city_${item.name}`" v-for="(item,index) in cityList.result"
					:key="index">
					<text class="color_99 size28">{{item.name}}</text>
					<view class="cityLi" @click="citySelect(subItem)" v-for="(subItem,subIndex) in item.data"
						:key="subIndex">{{subItem.name}}</view>
				</view>
			</view>
		</scroll-view>

		<view class="cityPostion" v-show="!searchCity">
			<view class="citpost flexac" @click="Togcity(item)" :class="{'active':item.name === scrollname}"
				v-for="(item,index) in cityList.result" :key="index">
				<text class="txt">{{item.name}}</text>
			</view>
		</view>

		<!-- 搜索 -->
		<scroll-view scroll-y="true" class="sarchView" :style="{top:fiexHeight+'px'}" v-if="searchCity">
			<view class="rows" v-if="searchList && searchList.length">
				<view class="cityLi" @click="citySelect(subItem)" v-for="(subItem,subIndex) in searchList"
					:key="subIndex">{{subItem.name}}</view>
			</view>
			<emptys empty="search" v-else title="无相关信息"></emptys>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				searchCity: '',
				scrolltop: 0,
				cityList: '',
				scrollname: '',
				scrollintoview: '',
				allData: [],
			}
		},
		onLoad() {
			uni.request({
				url: 'https://msraimgcdn.mogoie.com/json/city.json',
				success: res => {
					this.cityList = res.data
				}
			})
		},
		onShow() {
			let that = this;
			setTimeout(() => {
				that.cityList.result.forEach((item, index) => {
					that.allData = [...that.allData, ...item.data];
					that.getViewInfo(`#city_${item.name}`).then(res => {
						const result = res.top;
						item.tops = result
					})
				})
			}, 1000)
		},
		methods: {
			...mapMutations(['SeletCity']),
			Togcity(item) {
				this.scrollintoview = `city_${item.name}`
				this.scrollname = item.name;
			},
			getViewInfo(selector) {
				const query = uni.createSelectorQuery().in(this);
				return new Promise((resolve) => {
					query.select(selector).boundingClientRect(data => {
						resolve(data)
					}).exec();
				})
			},
			scroll(e) {
				let that = this;
				const scrollTop = e.detail.scrollTop;
				const result = that.cityList.result;
				const fiexHeight = that.fiexHeight;
				for (let i = 0; i < result.length; i++) {
					if (scrollTop >= result[i].tops - fiexHeight && i == result.length - 1) {
						that.scrollname = result[i].name;
						break;
					}
					if (scrollTop >= result[i].tops - fiexHeight && scrollTop < result[i + 1].tops - fiexHeight && i !=
						result.length - 1) {
						that.scrollname = result[i].name;
					}
					if (scrollTop < result[0].tops - fiexHeight) that.scrollname = '';
				}
			},

			citySelect(item) {
				this.SeletCity(item);
				this.$back();
			}

		},
		computed: {
			...mapState(['navHeight', 'navWidth', 'System']),
			fiexHeight() {
				return this.System.statusBarHeight + this.navHeight + 70
			},

			searchList() {
				if (!this.allData.length || !this.searchCity) return;
				return this.allData.filter((n) => n.name.indexOf(this.searchCity) != -1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cityBar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #ffffff;
		z-index: 100;
	}

	.search {
		height: 70rpx;
		background-color: #f3f4f5;
		border-radius: 10rpx;
		overflow: hidden;
		padding: 0 20rpx;
	}

	.scrollY {
		width: 100%;
		height: 100vh;
	}

	.hot {
		width: calc((100% - 60rpx) / 4);
		height: 66rpx;
		position: relative;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.hot::after {
		content: "";
		width: 200%;
		height: 200%;
		box-sizing: border-box;
		border: 1px solid #d6d6d6;
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		transform: scale(.5);
		transform-origin: 0 0;
	}

	.hotCity {
		width: 680rpx;
		padding-left: 30rpx;
	}

	.allCity {
		width: 680rpx;
		padding: 30rpx 0 30rpx 30rpx;
	}

	.cityLi {
		width: 100%;
		padding: 24rpx 0;
		position: relative;
		color: #333;
		font-size: 26rpx;
	}

	.cityLi::after {
		content: "";
		width: 200%;
		height: 200%;
		position: absolute;
		left: 0;
		top: 0;
		border-bottom: 1px solid #d6d6d6;
		transform: scale(.5);
		transform-origin: 0 0;
	}

	.cityPostion {
		position: fixed;
		top: 50%;
		right: 20rpx;
		z-index: 101;
		transform: translate(0, -50%);
	}

	.citpost {
		margin: 14rpx 0;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.txt {
		font-size: 22rpx;
		color: #626262;
	}

	.active {
		background-color: #e9e9e9;
	}

	.sarchView {
		width: 100%;
		background-color: #ffffff;
		padding-left: 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 200;
	}
</style>